<template>
	<div>
		<div class="w-full h-full">
			<div class="h-full rounded-[12px] overflow-hidden" @mouseenter="countFlag = false" @mouseleave="countFlag = true">
				<el-scrollbar ref="scrollbarRef" @scroll="scroll">
					<div ref="innerRef">
						<div class="px-4 py-1 alarm-item" v-for="item in list" :key="item.id">
							<div class="flex items-center justify-between">
								<div class="text-[#08c6f9]">设备： {{ item.equipmentName }}</div>
								<div>
									<el-tag size="small" :type="item.eventStatus === 20 ? 'success' : item.eventStatus === 10 ? 'warning' : 'info'">{{
										item.eventStatus === 20 ? '已处理' : item.eventStatus === 10 ? '未处理' : '误报'
									}}</el-tag>
								</div>
							</div>
							<div class="px-4 text-center text-error">{{ item.alarmCauses }}</div>
							<div class="text-xs text-right text-info">{{ item.createTime }}</div>
						</div>
					</div>
					<div v-if="!list.length" class="mt-4 text-center text-info">暂无数据</div>
				</el-scrollbar>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useEventListener } from '/@/hooks/event/useEventListener';
import { tryOnUnmounted, useDebounceFn } from '@vueuse/core';
interface alarm {
	createTime: string;
	alarmCauses: string;
	equipmentName: string;
	eventStatus: number;
	id: string;
}
const props = defineProps({
	list: {
		type: Array<alarm>,
		default: () => [],
	},
});
watch(
	() => props.list,
	() => {
		resize();
	},
	{
		deep: true,
	}
);
const countFlag = ref(true);
const timer = ref(0);
const innerRef = ref<HTMLDivElement>();
const scrollbarRef = ref();
const count = ref(0);
let removeResizeFn = () => {};
let resizeFnAlarm = resize;
resizeFnAlarm = useDebounceFn(resize, 200);

const max = ref((innerRef.value?.getBoundingClientRect()?.height || 0) - (scrollbarRef.value?.wrapRef?.getBoundingClientRect()?.height || 0));
const scroll = ({ scrollTop }) => {
	count.value = scrollTop;
};
const getMax = () => {
	max.value = (innerRef.value?.getBoundingClientRect()?.height || 0) - (scrollbarRef.value?.wrapRef?.getBoundingClientRect()?.height || 0);
};
function resize() {
	getMax();
	count.value = 0;
	scrollbarRef.value?.setScrollTop(0);
}
onMounted(() => {
	const { removeEvent } = useEventListener({
		el: window,
		name: 'resize',
		listener: resizeFnAlarm,
	});
	removeResizeFn = removeEvent;
	nextTick(() => {
		timer.value = setInterval(() => {
			getMax();
			// 鼠标移入停止
			if (!countFlag.value) {
				return;
			}
			count.value += 1;

			if (count.value >= max.value) {
				count.value = 0;
			}
			scrollbarRef.value?.setScrollTop(count.value);
		}, 100);
	});
});
tryOnUnmounted(() => {
	removeResizeFn();
	clearInterval(timer.value);
});
</script>

<style lang="scss" scoped>
.alarm-item {
	background-color: rgba($color: #1c5d6e, $alpha: 0.6);
	border-radius: 12px;
	margin-bottom: 12px;
}
</style>
